<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.specName" placeholder="请输入规格名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery" v-if="$usePermission('admin:product:spec:query')">查询</el-button>
          <el-button type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="btn-list">
        <el-button @click="addUser" v-if="$usePermission('admin:product:spec:save')">添加商品规格</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="specName" label="规格名称"></el-table-column>
        <el-table-column property="specKey" label="商品规格">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.specKey.split('-')" :key="index">
              <div>{{ item }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="specValue" label="规格属性">
          <template #default="scope">
            <div v-for="(item, index) in scope.row.specValue.split('-')" :key="index">
              <div>{{ item }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)" v-if="$usePermission('admin:product:spec:update')">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              v-if="$usePermission('admin:product:spec:remove')"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <spec-add-or-update ref="userAddOrUpdateRef" @refreshDataList="onQuery"></spec-add-or-update>
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { tableList, removeSpec } from '~/api/product/spec'
  import { showMessage } from '~/utils/my-notification'
  import { ElMessageBox } from 'element-plus'
  import specAddOrUpdate from './spec-add-or-update.vue'

  const currentPage = ref(1)
  const pageSize = ref(20)
  const background = ref(false)
  const disabled = ref(false)
  const total = ref(0)
  const userAddOrUpdateRef = ref(null)

  const formInline = reactive({
    specName: ''
  })

  const tableData = ref([])

  onQuery()
  // 查询
  function onQuery() {
    tableList(currentPage.value, pageSize.value, formInline).then(res => {
      if(res && res.data.code === 200) {
        const datas = res.data.data.records
        tableData.value = datas
        total.value = res.data.data.total
      }
    })
  }
  // 重置
  function onReset() {
    formInline.specName = ''
  }

  const multipleSelection = ref([])
  // 多选
  function handleSelectionChange(val) {
    multipleSelection.value = val
  }

  // 新增用户
  function addUser() {
    if(userAddOrUpdateRef.value) {
      userAddOrUpdateRef.value.init()
    }
  }
  // 修改
  const handleEdit = (row) => {
    if(userAddOrUpdateRef.value) {
      userAddOrUpdateRef.value.init(row.id)
    }
  }
  // 删除
  const handleDelete = (row) => {
    ElMessageBox.confirm(`确定执行删除操作?`, '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      removeSpec(row.id).then(res => {
        if(res && res.data.code === 200) {
          showMessage('删除成功!')
          onQuery()
        } else {
          showMessage(res.data.data, 'error')
        }
      }).catch(err => {
        showMessage('删除失败!', 'error')
      })
    }).catch(() => {

    })
    
  }

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    onQuery()
  }
</script>

<style>
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }

  .btn-list {
    margin-bottom: 20px;
  }
</style>
